<template>
    <el-drawer v-model="visible" direction="rtl" :size="975" :close-on-click-modal="false" :close-on-press-escape="false" class="mooc-drawer">
        <template #header>
            <h4>选择慕课</h4>
        </template>
        <template #default>
            <div class="filter-box">
                <div class="left-content">
                    <div class="asf-label">慕课类型：</div>
                    <div class="asf-values">
                        <el-select
                            v-model="filterData.categoryId"
                            :class="['select-item w140 h32', 'srt-select', {'srt-clear-select': filterData.categoryId}]"
                            popper-class="srt-select-popper"
                            no-data-text="暂无数据~"
                            suffix-icon="CaretTop"
                            :teleported="false"
                            :clearable="true"
                            placeholder="全部">
                            <el-option v-for="item in catesList" :value="item.id" :key="item.id" :label="item.title" />
                        </el-select>
                    </div>
                    <div class="asf-label ml24">慕课名称：</div>
                    <div class="asf-values">
                        <el-input
                            class="srt-el-input w160 h32"
                            size="small"
                            maxlength="50"
                            placeholder="请输入"
                            clearable
                            v-model.trim="filterData.title"
                        >
                        </el-input>
                    </div>
                    <div class="asf-label ml24">教师团队：</div>
                    <div class="asf-values">
                        <el-input
                            class="srt-el-input w140 h32"
                            maxlength="50"
                            placeholder="请输入"
                            clearable
                            v-model.trim="filterData.lecturerName"
                        >
                        </el-input>
                    </div>
                </div>
                <div class="btn ml24">
                    <el-button class="select-btn srt-el-button srt-el-button--primary srt-el-button-h32" plain @click="search">查询</el-button>
                    <el-button class="select-btn ml16 srt-el-button srt-el-button--cancel srt-el-button-h32" @click="resetParams">重置</el-button>
                </div>
            </div>
            <div class="mooc-list" v-loading="loading">
                <el-table ref="tableRef" border :data="tableData" style="width: 100%" row-key="id" class="srt-border-table" @select="handleSelectionChange" @select-all="handleSelectionChange">
                    <el-table-column type="selection" width="55" reserve-selection />
                    <!-- <el-table-column type="index" label="序号" width="70" /> -->
                    <el-table-column label="序号" width="70" show-overflow-tooltip>
                        <template #default="scope">
                            <div>{{(filterData.pageIndex - 1 )*filterData.pageSize+scope.$index+1}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cover" label="慕课名称">
                    <template #default="scope">
                            <div class="cursor mooc-title">
                                <Ellipsis :content="scope.row.title" :rows="1" :lineHeight="22"/>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="慕课分类" width="105">
                        <template #default="scope">
                            <div>
                                <Ellipsis v-if="scope.row.classifyList&&scope.row.classifyList.length" :content="scope.row.classifyList[0].name" :rows="1" :lineHeight="22"/>
                                <span v-else>-</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="classHour" label="学时" width="70" show-overflow-tooltip>
                        <template #default="scope">
                            <div>
                                {{scope.row.classHour!=undefined?scope.row.classHour:'-'}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="courseWareCount" label="教师团队" width="248">
                        <template #default="scope">
                            <div>
                                <Ellipsis v-if="scope.row.lecturerList && scope.row.lecturerList.length" :content="handleLecturers(scope.row.lecturerList && scope.row.lecturerList.length ? scope.row.lecturerList : [])" :rows="1" :lineHeight="22"/>
                                <span v-else>-</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page-wrap">
                    <Pagination
                        layout="prev, pager, next"
                        :current-page="filterData.pageIndex"
                        :page-size="filterData.pageSize"
                        :page-index="filterData.pageIndex"
                        :total="total"
                        @current-change="changePage"
                        @size-change="changePageSize">
                    </Pagination>    
                </div>
            </div>
        </template>
        <template #footer>
            <div class="footer-container">
                <div class="selected-mooc">
                    <span v-if="selectedMooc.length" class="topic-desc">已选<span class="topic-num">{{selectedMooc.length}}</span>门课，共计<span class="topic-num">{{learnHour}}</span>学时</span>
                </div>
                <div>
                    <el-button class="srt-el-button srt-el-button--cancel srt-el-button-h36" @click="cancel">取消</el-button>
                    <el-button class="srt-el-button srt-el-button--primary srt-el-button-h36 ml20" @click="confirm">确定</el-button> 
                </div>
                
            </div>
        </template>
  </el-drawer>
</template>

<script>
function getDefaultFilterData() {
    return {
        queryScope: 'dtBrand',
        categoryId: '',
        title: '',
        lecturerName: '',
        pageIndex: 1,
        pageSize: 10,
        classify: {
            classifyIds: [],
            level: 1
        },
        showCourseData: 1
    };
}
</script>
<script setup>

import { ref, watch, computed, nextTick } from 'vue';
import { queryToJson, handleLecturers } from '@/lib/tools.js'
import Pagination from '@/components/pagination/pagination.vue';
import Ellipsis from '@/components/ellipsis.vue'

const emit = defineEmits(['update:modelValue', 'update-content']);

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    moocList: {
        type: Object,
        default: () => []
    }
});

const filterData = ref(getDefaultFilterData());
const catesList = ref();

const loading = ref(false);
const tableRef = ref();
const tableData = ref([]);
const total = ref(0);
const selectedMooc = ref([]);

const visible = computed({
    get: () => props.modelValue,
    set: val => {
        emit('update:modelValue', val);
    }
});

const learnHour = computed(() => {
    return selectedMooc.value.reduce((sum, item) => {
        return sum + (item.classHour || 0);
    }, 0);
});

// 获取修改query后的新地址 (没必要吧，会刷新)
const watchPath = computed(() => {
    return queryToJson()
});

watch(() => props.modelValue, (val) => {
    if (val) {
        filterData.value = getDefaultFilterData();
        selectedMooc.value = [...props.moocList];
        getContentPageMoocList();
        getClassifyList();
        nextTick(() => {
            toggleSelection(props.moocList);
        });
    } else {
        selectedMooc.value = [];
        tableRef.value.clearSelection();
    }
});

function getContentPageMoocList() {
    loading.value = true
    return G_transmit('topicSelectMoocList', {
        data: {
            taskId: watchPath.value.id,
            ...filterData.value
        }
    })
    .then(({ status, data }) => {
        tableData.value = data.rows;
        total.value = data.total;
    })
    .catch((err) => {
        console.log(err, 'err');
    }).finally(() => {
        loading.value = false;
    });
}

async function changePage(pageIndex) {
    filterData.value.pageIndex = pageIndex;
    getContentPageMoocList()
}

function changePageSize(pageSize) {
    filterData.value.pageSize = pageSize;
    changePage(1);
}

function search() {
    const categoryId = filterData.value.categoryId;
    filterData.value.classify.classifyIds = categoryId ? [categoryId] : [];
    changePage(1);
}

function resetParams() {
    filterData.value = getDefaultFilterData();
    changePage(1);
}

function getClassifyList () {
    return G_transmit('classifyList', {
        queries: {
            type: 'mooc'
        }
    }).then(res => {
        catesList.value = res.data || [];
    }).catch((_err) => {

    })
}

function handleSelectionChange(selection) {
    selectedMooc.value = selection;
}

function toggleSelection(rows) {
    (rows || []).forEach(row => {
        tableRef.value.toggleRowSelection(row, true);
    });
}

function cancel () {
    emit('update:modelValue', false);
}

function confirm () {
    const len = selectedMooc.value.length;
    const message = len === 0 ? '请选择慕课' : (len > 100 ? '最多选择100门慕课' : '');
    if (message) {
        G_dispatchEvent('toast', { message, type: 'error'});
        return;
    }
    emit('update-content', selectedMooc.value);
    cancel();
}
</script>

<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;

}
.filter-box {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
    // justify-content: space-between;
    .left-content{
        display: inline-flex;
        align-items: center;
    }
    .btn{
        text-align: right;
    }
}
.asf-label {
    // width: 76px;
    font-size: 16px;
    color: #222222;
    line-height: 21px;
}
.asf-values {
    // display: flex;
    // flex-wrap: wrap;
    // color: #222222;
    // line-height: 14px;
    // margin-left: 18px;
}
.select-btn {
    width: 76px;
}
.ml12 {
    margin-left: 12px;
}
.ml16 {
    margin-left: 16px;
}
.ml20 {
    margin-left: 20px !important;
}
.ml24 {
    margin-left: 24px;
}
.h32 {
    height: 32px;
}
.srt-select :deep(.el-input__wrapper) {
    height: 32px;
}
.w160 {
    width: 160px;
}
.w140 {
    width: 140px;
}
.page-wrap {
    margin-top: 30px;
    text-align: right;
} 
.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.selected-mooc {
    font-size: 14px;
    color: #222222;
    line-height: 22px;
    margin-left: 12px;
    .topic-num {
        margin: 0 3px;
        color: #47698C;
    }
}
</style>
<style lang="scss">
.mooc-drawer .el-drawer__header {
    box-sizing: border-box;
    padding: 16px 20px;
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 0;
    font-size: 16px;
    line-height: 21px;
    font-weight: bold;
    color: #000000;
    .el-icon svg {
        width: 12px;
        height: 12px;
    }
}
.mooc-drawer .el-drawer__footer {
    height: 76px;
    background: #FFFFFF;
    box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.05);
    border-radius: 0px 0px 4px 4px;
    padding: 20px;
}
</style>